<template>
    <el-dialog
        :visible.sync="isShow"
        title="批量修改培养方案"
        :before-close="handleClose"
        width="64%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <ul class="switch-ul">
            <li
                v-for="item in tabs"
                :key="item.key"
                @click="activeTab = item.key"
                :class="{ active: activeTab == item.key }"
            >
                {{ item.label }}
            </li>
        </ul>
        <div v-if="activeTab == 'course'">
            <el-radio-group v-model="activeRadio" style="margin:24px 12px;">
                <el-radio
                    :label="item.key"
                    v-for="item in radios"
                    :key="item.key"
                    >{{ item.label }}</el-radio
                >
            </el-radio-group>
            <el-form
                :model="editCourseForm"
                ref="editCourseForm"
                label-width="130px"
                label-position="right"
                style="margin-left:12px;"
                :rules="rules"
            >
                <template v-if="activeRadio == '1'">
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item label="原课程:" prop="oldCourseCode">
                                <el-select
                                    v-model="editCourseForm.oldCourseCode"
                                    filterable
                                    clearable
                                    placeholder="请选择课程"
                                    style="width:100%;"
                                    @change="checkdetails"
                                >
                                    <el-option
                                        v-for="item in coursesOld"
                                        :key="item.value"
                                        :label="item.value + ' ' + item.label"
                                        :value="item.value"
                                    ></el-option>
                                    <i class="el-icon-search" slot="prefix"></i>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item label="新课程:" prop="newCourseCode">
                                <el-select
                                    v-model="editCourseForm.newCourseCode"
                                    filterable
                                    clearable
                                    remote
                                    placeholder="请输入关键词"
                                    :remote-method="queryCourse1"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in coursesNew"
                                        :key="item.value"
                                        :label="item.value + ' ' + item.label"
                                        :value="item.value"
                                    ></el-option>
                                    <i class="el-icon-search" slot="prefix"></i>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="activeRadio == '2'">
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item
                                label="新增课程:"
                                prop="newCourseCode"
                            >
                                <el-select
                                    v-model="editCourseForm.newCourseCode"
                                    filterable
                                    remote
                                    clearable
                                    placeholder="请输入关键词"
                                    :remote-method="queryCourse1"
                                    style="width:100%;"
                                    @change="checkdetails"
                                >
                                    <el-option
                                        v-for="item in coursesNew"
                                        :key="item.value"
                                        :label="item.value + ' ' + item.label"
                                        :value="item.value"
                                    ></el-option>
                                    <i class="el-icon-search" slot="prefix"></i>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item label="课程类别:" prop="labelId">
                                <el-select
                                    v-model="editCourseForm.labelId"
                                    filterable
                                    remote
                                    clearable
                                    placeholder="请输入关键词"
                                    :remote-method="loadCourseCategory"
                                    style="width:100%;"
                                >
                                    <el-option
                                        v-for="item in courseCategories"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                    <i class="el-icon-search" slot="prefix"></i>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item label="是否必修:" >
                                  <el-checkbox v-model="editCourseForm.compulsory" :checked="false" true-label="1" false-label="0"></el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="activeRadio == '3'">
                    <el-row gutter="40">
                        <el-col span="12">
                            <el-form-item
                                label="删除课程:"
                                prop="oldCourseCode"
                            >
                                <el-select
                                    v-model="editCourseForm.oldCourseCode"
                                    filterable
                                    clearable
                                    placeholder="请选择课程"
                                    style="width:100%;"
                                    @change="checkdetails"
                                >
                                    <el-option
                                        v-for="item in coursesOld"
                                        :key="item.value"
                                        :label="item.value + ' ' + item.label"
                                        :value="item.value"
                                    ></el-option>
                                    <i class="el-icon-search" slot="prefix"></i>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template>
                    <el-row >
                        <el-col span="12">
                            <el-form-item label="是否同步个人计划:" >
                                  <el-checkbox v-model="editCourseForm.isSynchronousPlan" :checked="false" true-label="1" false-label="0"></el-checkbox>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="details">
                    <p>请核对课程和修改的培养方案信息</p>
                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="课程名称：">
                                <span class="blue">
                                    {{detailsData.name}}
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="课程编号：">
                                <span class="bold">
                                    {{detailsData.code}}
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学分：">
                                <span class="bold">
                                    {{detailsData.credits}}
                                </span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-table
                        :data="detailsTable"
                        ref="cultureSchemesTables"
                        stripe
                        style="width: 100%"
                        :cell-class-name="cellStyleMethod"
                        tooltip-effect="light"

                    >
                        <el-table-column label="年级" prop="grade" width="65"/>
                        <el-table-column label="培养方案" prop="name" min-width="150" show-overflow-tooltip/>
                        <el-table-column label="学院" prop="facultyI18n" show-overflow-tooltip/>
                        <el-table-column label="专业" prop="majorI18n" width="100" show-overflow-tooltip/>
                        <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
                        <el-table-column label="培养类别" prop="trainingCategoryI18n" width="100"/>
                        <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
                    </el-table>
                    <div class="edu-pagination">
                        <div class="float-right">
                            <el-pagination
                                :current-page="queryTempletsForm.pageNum_"
                                :page-sizes="[20,50,100,500,1000]"
                                :page-size="queryTempletsForm.pageSize_"
                                :total="queryTempletsForm.total"
                                layout="total, sizes, prev, pager, next, jumper"
                                style="float: right;margin:0;"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </div>
                </template>
            </el-form>
        </div>
        <div v-if="activeTab == 'content'">
            <el-form
                :model="editContentForm"
                ref="editContentForm"
                label-width="80px"
                label-position="right"
                style="margin:24px 0 0 12px;"
                :rules="rules1"
            >
                <el-row gutter="40">
                    <el-col span="10">
                        <el-form-item label="中英文:" prop="language">
                            <el-select
                                v-model="editContentForm.language"
                                style="width: 100%;"
                                @change="changeLanguage"
                            >
                                <el-option
                                    v-for="item in languages"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="40">
                    <el-col span="10">
                        <el-form-item label="选择章节:" prop="chapterId">
                            <el-select
                                v-model="editContentForm.chapterId"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in chapters"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="40">
                    <el-col style="margin-bottom:16px;">
                        <el-radio-group v-model="editContentForm.updateType">
                            <el-radio
                                :label="item.key"
                                v-for="item in positions"
                                :key="item.key"
                                >{{ item.label }}</el-radio
                            >
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row gutter="40">
                    <el-col>
                        <el-form-item label="内容设置:" prop="content">
                            <Tinymce
                                ref="editor"
                                :height="150"
                                v-model="editContentForm.content"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-if="detailsInfo">
                    <p>请核对修改的培养方案信息</p>
                    <el-table
                        :data="detailsTable"
                        ref="cultureSchemesTable"
                        stripe
                        style="width: 100%"
                        :cell-class-name="cellStyleMethod"
                        tooltip-effect="light"

                    >
                        <el-table-column label="年级" prop="grade" width="80"/>
                        <el-table-column label="培养方案" prop="name" min-width="150" show-overflow-tooltip/>
                        <el-table-column label="学院" prop="facultyI18n" show-overflow-tooltip/>
                        <el-table-column label="专业" prop="majorI18n" width="100"  show-overflow-tooltip/>
                        <el-table-column label="培养层次" prop="trainingLevelI18n" width="80"/>
                        <el-table-column label="培养类别" prop="trainingCategoryI18n" width="90"/>
                        <el-table-column label="学习形式" prop="formLearningI18n" width="80"/>
                    </el-table>
                    <div class="edu-pagination">
                        <div class="float-right">
                            <el-pagination
                                :current-page="queryTempletsForm.pageNum_"
                                :page-sizes="[20,50,100,500,1000]"
                                :page-size="queryTempletsForm.pageSize_"
                                :total="queryTempletsForm.total"
                                layout="total, sizes, prev, pager, next, jumper"
                                style="float: right;margin:0;"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </div>
                </template>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">{{
                $t("common.btn.cancel")
            }}</el-button>
            <el-button type="primary" @click="batchEdit">{{
                $t("common.btn.confirm")
            }}</el-button>
        </span>
    </el-dialog>
</template>
<script>
import {
    findCourseNameOrCodeList,
    getCourseCategoryList
} from "common/src/api/courseTemplate";
import { getCourseList, getCourseCategoryFormById } from "common/src/api/courseTemplate";
import Tinymce from "common/src/components/tinymce";
import * as API from "common/src/api/culture/cultruescheme";
import  { findCourseInfoByCode } from "common/src/api/culture/culturebinding";
export default {
    components: {
        Tinymce
    },
    props: {
        isShow: { type: Boolean, required: true },
        cultureSchemes: { type: Array, required: false },
        projId: { type: String, required: false, default: "1" },
        currentTemplet: { type: Number, required: true },
        currentDetails: { type: String, required: true },
        trainingLevel: { type: Number, required: true }
    },
    data() {
        return {
            tabs: [
                { label: "批量修改课程", key: "course" },
                { label: "批量修改内容", key: "content" }
            ],
            radios: [
                { label: "批量修改", key: "1" },
                { label: "批量增加", key: "2" },
                { label: "批量删除", key: "3" }
            ],
            positions: [
                { label: "段前插入", key: "1" },
                { label: "段后插入", key: "2" },
                { label: "章节替换", key: "3" }
            ],
            languages: [
                { value: "cn", label: "中文" },
                { value: "en", label: "英文" }
            ],
            activeTab: "course",
            activeRadio: "1",
            insertAtWhere: "0",
            chapters: [],
            courseCategories: [],
            details:false,
            detailsInfo:false,
            detailsData: "",
            detailsTable:[],
            editCourseForm: {
                newCourseCode: "",
                oldCourseCode: "",
                labelId: "",
                compulsory:'0',
                isSynchronousPlan:'0'
            },
            editContentForm: {
                updateType: "1",
                language: "cn",
                chapterId: "",
                content: ""
            },
            queryTempletsForm:{
                // grade: "", // 年级
                // trainingLevel: "", // 培养层次
                // faculty: "", // 学院
                // major: "", // 专业
                // degreeType: "", // 学位类型
                // formLearning: "", // 学习形式
                // spcialPlan: "", // 专项计划
                // studentAbroad: "", // 国际学生
                // status: "1", // 状态
                // name: "", // 名称
                pageNum_: 1,
                pageSize_: 20,
                //total: 0,
                // projId: "1",
                // professionCateGory: "",
                // trainingCategory: [],
                ids:''
            },
            coursesOld: [],
            coursesNew: [],
            rules: {
                oldCourseCode: [
                    {
                        required: true,
                        message: "请选择课程"
                    }
                ],
                newCourseCode: [
                    {
                        required: true,
                        message: "请选择课程"
                    }
                ],
                labelId: [
                    {
                        required: true,
                        message: "请选择课程类别"
                    }
                ]
            },
            rules1: {
                language: [
                    {
                        required: true,
                        message: "请选择"
                    }
                ],
                chapterId: [
                    {
                        required: true,
                        message: "请选择章节"
                    }
                ],
                content: [
                    {
                        required: true,
                        message: "请输入内容"
                    }
                ]
            }
        };
    },
    methods: {
        cellStyleMethod({row, column, rowIndex, columnIndex}){
            if (columnIndex == 1) {
                return 'normal-cell';
            }
        },
        queryCourse1(val) {
            let query = { condition: val };
            getCourseList(query).then(response => {
                if (response.code == 200) {
                    this.coursesNew = response.data.list.map(ele => {
                        return { value: ele.code, label: ele.name };
                    });
                }
            });
        },
        queryCourse2() {
            API.findCuturecourseList(this.cultureSchemes).then(response => {
                if (response.code == 200) {
                    this.coursesOld = response.data.map(ele => {
                        return { value: ele.code, label: ele.name };
                    });
                }
            });
        },
        init() {
            if (this.activeTab == "content") {
                if (this.$refs["editContentForm"])
                    this.$refs["editContentForm"].clearValidate();
                this.loadChapter();
            }
            if (this.activeTab == "course") {
                if (this.cultureSchemes) {
                    if (this.$refs["editCourseForm"]) {
                        this.$refs["editCourseForm"].clearValidate();
                        this.editCourseForm.newCourseCode = "";
                        this.editCourseForm.oldCourseCode = "";
                        this.editCourseForm.labelId = "";
                        this.coursesNew = [];
                        this.coursesOld = [];
                    }
                    this.editCourseForm.isSynchronousPlan = "0";
                    this.queryCourse2();
                    this.checkCulture();
                }
            }
        },
        loadCourseCategory() {
            let queryForm = {
                trainingLevel: this.trainingLevel,
                label: this.editCourseForm.labelId, // 课程名称
                pageNum_: 1,
                pageSize_: 1000
            };
            getCourseCategoryList(queryForm).then(res => {
                if (res.code === 200) {
                    if (res.data.list && res.data.list.length > 0) {
                        this.courseCategories = res.data.list
                            .filter(
                                c =>
                                    c.id != 50 &&
                                    c.id != 561 &&
                                    c.id != 1072 &&
                                    c.id != 1583
                            )
                            .map(ele => {
                                return {
                                    label:
                                        ele.label +
                                        "(" +
                                        ele.trainingLevel +
                                        ")",
                                    value: ele.id
                                };
                            });
                        this.courseCategories = _.uniqWith(
                            this.courseCategories,
                            _.isEqual
                        );
                    } else {
                        this.courseCategories = [];
                    }
                }
            });
        },
        //获取详情
        checkdetails(val){
            if(val){
                this.details = true;
                this.checkCourse(val)
                this.checkCulture(val)
            }else{
                this.details = false;
            }
            
        },
        //获取课程详情
        checkCourse(val){
            findCourseInfoByCode(val).then(res => {
                if (res.code == 200) {
                    this.detailsData = res.data[0]
                }
            });
        },
        //获取方案详情
        checkCulture(val){
            this.queryTempletsForm.ids = this.cultureSchemes
            API.findCultureSchemeListByIds(
                this.queryTempletsForm
            ).then(res => {
                if (res.code == 200) {
                    this.detailsTable = res.data.list;
                    console.log(this.detailsTable)
                    this.queryTempletsForm.total = res.data.total_;
                }
            });
        },
        handleSizeChange(val) {
            this.queryTempletsForm.pageSize_ = val;
            this.checkCulture();
        },
        handleCurrentChange(val) {
            this.queryTempletsForm.pageNum_ = val;
            this.checkCulture();
        },
        changeLanguage(val) {
            if (val == "cn") {
                this.chapters = this.chaptersCn;
            } else {
                this.chapters = this.chaptersEn;
            }
        },
        //获取章节
        loadChapter() {
            API.findNodeList(this.cultureSchemes).then(res => {
                if (res.code == 200) {
                    this.chaptersCn = res.data.map(ele => {
                        return { label: ele.name, value: ele.name };
                    });
                    this.chaptersEn = res.data.map(ele => {
                        return { label: ele.nameEn, value: ele.nameEn };
                    });
                    this.chapters = this.chaptersCn;
                }
            });
        },
        batchEdit() {
            if (this.activeTab == "course") this.bitchEditCourse();
            else this.bitchEditContent();
        },
        bitchEditCourse() {
            console.log(this.editCourseForm)
            this.$refs["editCourseForm"].validate(valid => {
                if (valid) {
                    if (this.activeRadio == "1") {
                        API.bachUpdateCultureCourse(
                            this.cultureSchemes,
                            this.editCourseForm.oldCourseCode,
                            this.editCourseForm.newCourseCode,
                            this.editCourseForm.isSynchronousPlan
                        ).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.handleClose();
                            }
                        });
                    }
                    if (this.activeRadio == "2") {
                        API.bachAddCultureCourse(
                            this.cultureSchemes,
                            this.editCourseForm.newCourseCode,
                            this.editCourseForm.labelId,
                            this.editCourseForm.compulsory,
                            this.editCourseForm.isSynchronousPlan
                        ).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.handleClose();
                            }
                        });
                    }
                    if (this.activeRadio == "3") {
                        API.bachdaleteCultureCourse(
                            this.cultureSchemes,
                            this.editCourseForm.oldCourseCode,
                            this.editCourseForm.isSynchronousPlan
                        ).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.handleClose();
                            }
                        });
                    }
                    // Object.assign(this.editCourseForm, this.getCommonParam());
                    // if (this.activeRadio == "0") this.batchReplaceCourse();
                    // else if (this.activeRadio == "1") this.batchAddCourse();
                    // else if (this.activeRadio == "2") this.batchDeleteCourse();
                }
            });
        },
        batchAddCourse() {
            API.batchAddCourses(this.editCourseForm).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.handleClose();
                }
            });
        },
        batchReplaceCourse() {
            API.batchReplaceCourses(this.editCourseForm).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.handleClose();
                }
            });
        },
        batchDeleteCourse() {
            API.batchDelCourses(this.editCourseForm).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.handleClose();
                }
            });
        },
        bitchEditContent() {
            this.$refs["editContentForm"].validate(valid => {
                if (valid) {
                    let parms;
                    if (this.editContentForm.language == "cn") {
                        parms = {
                            name: this.editContentForm.chapterId,
                            nameEn: "",
                            content: this.editContentForm.content,
                            contentEn: "",
                            cultureIDliSt: this.cultureSchemes,
                            updateType: this.editContentForm.updateType
                        };
                    } else {
                        parms = {
                            name: "",
                            nameEn: this.editContentForm.chapterId,
                            content: "",
                            contentEn: this.editContentForm.content,
                            cultureIDliSt: this.cultureSchemes,
                            updateType: (
                                +this.editContentForm.updateType + 3
                            ).toString()
                        };
                    }
                    //Object.assign(this.editContentForm, this.getCommonParam());
                    API.updateCultureTemolateContent(parms).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                            this.handleClose();
                        }
                    });
                }
            });
        },
        handleClose() {
            this.trainingLevel = "";
            this.$emit("change-visible");
        },
        reset() {
            this.courses = [];
        }
    },
    watch: {
        isShow: function(_n, _o) {
            this.activeTab = "course";
            this.details = false;
            this.cultureSchemes = this.cultureSchemes.toString();
            this.editCourseForm.newCourseCode = "";
            this.editCourseForm.oldCourseCode = "";
            this.editCourseForm.labelId = "";
            this.editContentForm.chapterId = "";
            this.editContentForm.content = "";
            this.editContentForm.isSynchronousPlan = "0";
            this.coursesNew = [];
            this.coursesOld = [];
            if (_n) {
                this.init();
            }
        },
        activeTab: function(_n, _o) {
            if (this.$refs["editCourseForm"]) {
                this.$refs["editCourseForm"].clearValidate();
                this.editCourseForm.newCourseCode = "";
                this.editCourseForm.oldCourseCode = "";
                this.editCourseForm.labelId = "";
                this.coursesNew = [];
                this.coursesOld = [];
            }
            if (this.$refs["editContentForm"]) {
                this.$refs["editContentForm"].clearValidate();
                this.editContentForm.chapterId = "";
                this.editContentForm.content = "";
                this.editContentForm.language = "cn";
            }
            this.init();
            this.courses = [];
            this.details = false
            this.detailsInfo = true
        },
        activeRadio: function(_n, _o) {
            this.init();
            this.details = false
            if (_n == 2) {
                this.loadCourseCategory();
            }
        },
        trainingLevel: function(_n, _o) {
            this.loadCourseCategory();
        }
    }
};
</script>
<style lang="scss" scoped>
ul.switch-ul {
    padding: 0;
    margin: 0;
}
ul.switch-ul li {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    border-right: 1px solid #ccc;
}
ul.switch-ul li:last-child {
    border-right: none;
}
ul.switch-ul li.active {
    color: #66b1ff;
}
.blue{
    color: #66b1ff;
    font-weight: bold;
}
.bold{
    font-weight: bold;
}
</style>

